<template>
  <div class="questions-container">
    <el-card>
      <form-container @searchSubject="getQuestionsList($event)"/>
      <!-- 消息提示 警告 -->
      <el-alert :title="`数据一共${total}条`" type="info" show-icon :closable="false"></el-alert>
      <!-- 表格区域 -->
      <el-table :data="tableData" style="width: 100%" stripe>
        <el-table-column prop="number" label="试题编号" width="120"></el-table-column>
        <el-table-column prop="subject" label="学科" width="80"></el-table-column>
        <el-table-column prop="catalog" label="目录" width="80"></el-table-column>
        <el-table-column prop="questionType" label="题型" width="70">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType==1">单选</span>
            <span v-else-if="scope.row.questionType==2">多选</span>
            <span v-else>简单</span>
          </template>
        </el-table-column>
        <el-table-column prop="question" label="题干">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间">
          <template slot-scope="scope">{{scope.row.addDate | dateFormat}}</template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="70">
          <template slot-scope="scope">
            <span v-if="scope.row.difficulty==1">简单</span>
            <span v-else-if="scope.row.difficulty==2">一般</span>
            <span v-else>困难</span>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="120"></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-view"
              circle
              plain
              @click="getQuestionsPartData(scope.row.id)"
            ></el-button>
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              circle
              plain
              @click="editQuestion(scope.row)"
            ></el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              circle
              plain
              @click="delQuestion(scope.row.id)"
            ></el-button>
            <el-button
              size="mini"
              type="success"
              icon="el-icon-check"
              circle
              plain
              @click="addchoiceQuestions(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryList.page"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="queryList.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
      <!-- 预览文本框 -->
      <el-dialog title="题目预览" :visible.sync="previewDialogVisible" width="56%" height="50%">
        <el-row>
          <el-col :span="6">
            【题型】:
            <template>
              <span v-if="QuestionsPartData.questionType==1">单选</span>
              <span v-else-if="QuestionsPartData.questionType==2">多选</span>
              <span v-else>简答</span>
            </template>
          </el-col>
          <el-col :span="6">【编号】:{{QuestionsPartData.id}}</el-col>
          <el-col :span="6">
            【难度】:
            <template>
              <span v-if="QuestionsPartData.difficulty==1">简单</span>
              <span v-else-if="QuestionsPartData.difficulty==2">一般</span>
              <span v-else>困难</span>
            </template>
          </el-col>
          <el-col :span="6">【标签】:{{QuestionsPartData.tags}}</el-col>
          <el-col :span="6">【学科】:{{QuestionsPartData.subjectName}}</el-col>
          <el-col :span="6">【目录】:{{QuestionsPartData.directoryName}}</el-col>
          <el-col :span="6">【方向】:{{QuestionsPartData.direction}}</el-col>
        </el-row>
        <hr>
        <el-row>
          <el-col class="question">
            【题干】:
            <template>
              <span v-html="QuestionsPartData.question"></span>
            </template>
            <template>
              <div v-if="QuestionsPartData.questionType!=3">
                <p>&nbsp;</p>
                <span>{{QuestionsPartData.questionType==1?'单选题':"多选题"}} 选项：（以下选中的选项为正确答案）</span>
                <div v-if="QuestionsPartData.questionType==1">
                  <el-radio
                    :disabled="item.isRight===0"
                    v-model="radio"
                    :label="item.isRight"
                    v-for="(item,index) in QuestionsPartData.options"
                    :key="index"
                  >{{item.title}}</el-radio>
                </div>
                <div v-else-if="QuestionsPartData.questionType==2">
                  <el-checkbox
                    :label="item.title"
                    v-for="(item,index) in QuestionsPartData.options"
                    :key="index"
                    :checked="item.isRight==1"
                    disabled
                  ></el-checkbox>
                </div>
              </div>
            </template>
          </el-col>
        </el-row>
        <hr>
        <el-row>
          <el-col>
            【参考答案】:
            <el-button type="danger" @click="isVadio=!isVadio">视频答案预览</el-button>
            <template>
              <div :class="isVadio?'':'none'">
                <video
                  src="../../assets/276984.mp4"
                  controls="controls"
                  width="300px"
                  height="250px"
                />
              </div>
            </template>
          </el-col>
        </el-row>
        <hr>
        <el-row>
          <el-col class="answer">
            【答案解析】:
            <template>
              <span v-html="QuestionsPartData.answer"></span>
            </template>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            【题目备注】:
            {{QuestionsPartData.remarks}}
          </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="previewDialogVisible = false">关闭</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import FormContainer from '@/components/questions/search-form'
import {
  getQuestions,
  getQuestionsPart,
  delQuestion,
  ADchoiceQuestions
} from '@/api/questions.js'
export default {
  name: 'QuestionsContainer',
  props: {},
  components: {
    FormContainer
  },
  data() {
    return {
      // 预览文本框显示状态
      previewDialogVisible: false,
      // 表格区域
      tableData: [],
      total: 0,
      // 请求参数
      queryList: {
        page: 1,
        pagesize: 10,
        keyword: ''
      },
      // 试题数据
      QuestionsPartData: [],
      // 单选题选中的选项
      radio: 1,
      // 多选题选中的选项
      checkList: [],
      isVadio: false
    }
  },
  computed: {},
  watch: {},
  methods: {
    // 获取基本题库数据
    async getQuestionsList(e) {
      try {
        const { data } = await getQuestions(e || this.queryList)
        this.tableData = data.items
        this.total = data.counts
      } catch (err) {
        this.$message.error('获取失败')
      }
    },
    // 每页多少条发生改变
    handleSizeChange(val) {
      this.queryList.pagesize = val
      this.getQuestionsList()
    },
    // 页数发生改变
    handleCurrentChange(val) {
      this.queryList.page = val
      this.getQuestionsList()
    },
    // 基础题库详情
    async getQuestionsPartData(subjectID) {
      this.previewDialogVisible = true
      const { data } = await getQuestionsPart(subjectID)
      this.QuestionsPartData = data
      this.checkList = data.options.filter(item => {
        return item.isRight
      })
    },
    // 编辑题目  点击编辑按钮把该行数据存入vuex中
    async editQuestion(rowQuest) {
      const { data } = await getQuestionsPart(rowQuest.id)
      // 添加城市和选项
      rowQuest.province = data.province
      rowQuest.options = data.options
      this.$store.commit('questionDetail', rowQuest)
      this.$router.push({
        path: '/questions/new'
      })
    },
    // 删除题目
    async delQuestion(id) {
      const confirmStr = await this.$confirm(
        '此操作将永久删除该题目, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirmStr !== 'confirm') return
      try {
        await delQuestion(id)
        this.$message.success('删除成功')
      } catch (err) {
        this.$message.error('删除失败')
      }
      this.getQuestionsList()
    },
    // 加入精选题库
    async addchoiceQuestions(id) {
      const confirmStr = await this.$confirm(
        '此操作将该题目加入精选, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirmStr !== 'confirm') return
      try {
        const res = await ADchoiceQuestions(id, 1)
        console.log(res)
        this.$message.success('加入成功')
      } catch (err) {
        this.$message.error('加入失败')
      }
      this.getQuestionsList()
    }
  },
  created() {
    this.getQuestionsList()
  },
  mounted() {}
}
</script>
<style lang='less' scoped>
.questions-container {
  .el-radio {
    display: block;
    margin: 20px 0;
  }
  .el-row {
    margin: 15px 0;
    .el-col {
      padding-bottom: 5px;
    }
    .question {
      & > span:first-child {
        color: blue;
        p {
          padding: 10px 0;
        }
      }
      .el-checkbox {
        display: block;
        margin: 15px 0;
      }
    }
    .answer {
      display: flex;
    }
  }
  .none {
    display: none;
  }
}
</style>
